<script setup>
import VIcon from "../../../components/icon/VIcon.vue";

const props = defineProps({
  menuData: {
    type: Array,
    default: () => []
  }
});
</script>

<template>
  <template v-for="item in menuData">
    <!-- 判断是否存在子菜单 -->
    <el-sub-menu v-if="!item.hidden && item.children?.length > 0" :index="item.name">
      <template #title>
        <v-icon :hover="false" v-if="item.meta?.icon" :icon="item.meta?.icon" size="18"/>
        <span>{{ item.meta?.title || item.name }}</span>
      </template>
      <!-- 递归遍历子菜单 -->
      <v-menu :menuData="item.children"></v-menu>
    </el-sub-menu>
    <!-- 没有子菜单，则直接显示 -->
    <el-menu-item v-else-if="!item.hidden" :index="item.name" style="height: var(--menu-height);">
      <v-icon :hover="false" v-if="item.meta?.icon" :icon="item.meta?.icon" size="18"/>
      <span>{{ item.meta?.title || item.name }}</span>
    </el-menu-item>
  </template>
</template>

<style scoped>
</style>